<template>
    <div class="vip_center_box">
        <div class="left_box">
            <div class="pre_item">首页&nbsp;&nbsp;>我的账户&nbsp;&nbsp;>{{ type }}</div>
            <div class="current_item">{{ type }}</div>
            <div class="type_list">
                <div @click="shift('个人中心')">个人中心</div>
                <div @click="shift('我的订单')">我的订单</div>
            </div>
        </div>
        <div class="right_box">
            <myorder v-if="type==='我的订单'"></myorder>
            <center v-if="type==='个人中心'"></center>
        </div>
    </div>
</template>

<script setup>
import myorder from '@/components/myorder.vue';
import center from '@/components/center.vue';
import { computed, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const that=getCurrentInstance()
const store=useStore()
const route=useRoute()
const user=computed(()=>{
    return JSON.parse(localStorage.getItem('user'))
})
const type=computed(()=>{
    return store.state.account.type
})
const shift=(name)=>{
    console.log(name)
    store.state.account.type=name
}
</script>

<style>
.vip_center_box{
    display: flex;
    flex-direction: row;
    flex: 1;
}
.left_box{
    /* border: 1px solid; */
    width: 15%;
    padding: 20px;
}
.right_box{
    /* border: 1px solid red; */
    /* width: 80%; */
    flex: 1;
}
.pre_item{
    font-size: 10px;
    color: #bbb;
    margin: 20px 0;
}
.current_item{
    font-size: 40px;
    margin: 25px 0;
}
.type_list>div{
    border-bottom: 1px solid #bbb;
    padding: 20px 0;
    font-size: 16px;
}
</style>